<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <meta name="renderer" content="webkit" />
    <meta name="force-rendering" content="webkit" />
    <title>学习提醒</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@nutui/nutui@2.2.13/dist/nutui.min.css">
    <link rel="stylesheet" type="text/css" href="css/common.css" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <link rel="stylesheet" type="text/css" href="css/popup.css" />
    <script src="js/config.js"></script>
    <script src="https://unpkg.zhimg.com/axios/dist/axios.min.js"></script>
    <script src="js/axios-config.js?v=4"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="js/component.js?v=10"></script>
    <script src="https://cdn.jsdelivr.net/npm/@nutui/nutui@2.2.13/dist/nutui.min.js"></script>
    <style>
        .setButton {
            text-align: center;
            margin: 30px 0;
        }
        .setButton .btn {
            background: #1e9b2b; border-radius: .06rem
        }
    </style>
</head>

<body>
    <div class="remind-study" id="remindStudy">
        <nut-radiogroup class="rs-group" v-model="radioGroupVal">
            <div class="rs-group-cell">
                <nut-radio label="0">关闭</nut-radio>
            </div>
            <div class="rs-group-cell">
                <nut-radio label="1">自动</nut-radio>
            </div>
            <div class="rs-group-cell">
                <nut-radio label="2">自定义</nut-radio>
            </div>
            <div class="rs-group-cell flex flex-align-center" @click="isVisible=isShow">
                <span class="flex-1">提醒时间</span>
                <span class="">{{ time }}</span>
                <img src="img/shipinxuexi/xueyingyu_06.png" class="right-icon" />
            </div>
            <nut-datepicker :is-visible="isVisible" type="time" title="请选择时间" :minute-step="5" defaultValue="10:30" @close="switchPicker('isVisible')"
                @choose="setChooseValue">
            </nut-datepicker>
            <div class="setButton">
                <nut-button @click="ev_set" class="btn">确定</nut-button>
            </div>
        </nut-radiogroup>


    </div>
</body>
<script>
    var signApp = new Vue({
        el: "#remindStudy",
        data: {
            radioGroupVal: "",
            isVisible: false,
            isShow: false,
            time: '',
        },
        watch: {
            /*
            radioGroupVal: function () {
                if (this.radioGroupVal == 2) {
                    this.isShow = true;
                } else {
                    this.isShow = false;
                    this.time = '08:00';
                }
                this.setChoose(this.radioGroupVal, this.time);
            }
            */
        },
        created() {
            this.getStatus();
        },
        methods: {
            ev_set(){
                if (this.radioGroupVal == 2) {
                    this.isShow = true;
                } else {
                    this.isShow = false;
                    this.time = '08:00';
                }
                this.setChoose(this.radioGroupVal, this.time);
            },
            switchPicker(param) {
                this[`${param}`] = !this[`${param}`];
            },
            setChooseValue(param) {
                this.time = param[2];
                // this.setChoose(this.radioGroupVal, this.time);
            },
            getStatus() {
                axios.get('/mp/wechatUser/getRemindStatus').then(res => {
                    var data = res.data;
                    this.time = data.status == 2 ? data.time : '08:00';
                    this.radioGroupVal = data.status;
                });
            },
            setChoose(status, time) {
                axios.post('/mp/wechatUser/remindStudy', {
                    status: status,
                    time: time
                }).then(res => {
                    if (res.status !== 200) {
                        console.log('设置状态失败');
                    }
                });

            }

        }

    });

</script>

</html>